<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Invoice </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">



  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Invoice
        <small>Bill NO: 0154879</small>
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Invoice</li>
      </ol>
    </section>

    <div class="pad margin no-print">
      <div class="callout callout-success" style="margin-bottom: 0!important;">
        <h4><i class="fa fa-info"></i> Note:</h4>
        This page has been enhanced for printing. Click the print button at the bottom of the invoice to test.
      </div>
    </div>

    <!-- Main content -->
    <section class="invoice printableArea">
      <!-- title row -->
      <div class="row">
        <div class="col-12">
		  <div class="page-header">
			<h2 class="d-inline"><small>洲博通</small><br><span class="font-size-50">INVOICE</span></h2>
			<div class="pull-right text-right">
				<p class="d-inline">124 Lorem Ipsum, Suite 478,  Dummuy, USA 123456</p>
				<p class="pt-10"><strong>Phone: (00) 123-456-7890 &nbsp;&nbsp;&nbsp;&nbsp; Email: info@example.com</strong></p></div>	
		  </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- info row -->
      <div class="row invoice-info">
        <div class="col-md-6 invoice-col">
          <strong>To</strong>
          <address>
            <strong class="text-blue font-size-24">Doe Shina</strong><br>
            124 Lorem Ipsum, Suite 478, Dummuy, USA 123456<br>
            <strong>Phone: (00) 789-456-1230 &nbsp;&nbsp;&nbsp;&nbsp; Email: conatct@example.com</strong>
          </address>
        </div>
        <!-- /.col -->
        <div class="col-md-6 invoice-col text-right">
		  <h5>Date</h5>
          <h3>22 April 2018</h3>
        </div>
        <!-- /.col -->
        <div class="col-sm-12 invoice-col">
			<div class="invoice-details row no-margin bg-dark">
			  <div class="col-md-6 col-lg-3"><b>Invoice </b>#0154879</div>
			  <div class="col-md-6 col-lg-3"><b>Order ID:</b> FC12548</div>
			  <div class="col-md-6 col-lg-3"><b>Payment Due:</b> 14/08/2017</div>
			  <div class="col-md-6 col-lg-3"><b>Account:</b> 0001245879315</div>
			</div>
		</div>
      <!-- /.col -->
      </div>
      <!-- /.row -->

      <!-- Table row -->
      <div class="row">
        <div class="col-12 table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>#</th>
              <th>Description</th>
              <th>Serial #</th>
              <th class="text-right">Quantity</th>
              <th class="text-right">Unit Cost</th>
              <th class="text-right">Subtotal</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>Milk Powder</td>
              <td>12345678912514</td>
              <td class="text-right">2</td>
              <td class="text-right">$26.00</td>
              <td class="text-right">$52.00</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Air Conditioner</td>
              <td>12345678912514</td>
              <td class="text-right">1</td>
              <td class="text-right">$1500.00</td>
              <td class="text-right">$1500.00</td>
            </tr>
            <tr>
              <td>3</td>
              <td>TV</td>
              <td>12345678912514</td>
              <td class="text-right">2</td>
              <td class="text-right">$540.00</td>
              <td class="text-right">$1080.00</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Mobile</td>
              <td>12345678912514</td>
              <td class="text-right">3</td>
              <td class="text-right">$320.00</td>
              <td class="text-right">$960.00</td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div class="row">
        <!-- accepted payments column -->
        <div class="col-12 col-sm-6">
			<p class="lead"><b>Payment Methods:</b></p>
          <img src="../../../images/visa.png" alt="Visa">
          <img src="../../../images/mastercard.png" alt="Mastercard">
          <img src="../../../images/american-express.png" alt="American Express">
          <img src="../../../images/paypal2.png" alt="Paypal">

          <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
            Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg
            dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
          </p>
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 text-right">
			<p class="lead"><b>Payment Due</b><span class="text-danger"> 14/08/2017 </span></p>
			
         	<div>
         		<p>Sub - Total amount  :  $3,592.00</p>
         		<p>Tax (18%)  :  $646.56</p>
         		<p>Shipping  :  $110.44</p>
         	</div>
         	<div class="total-payment">
         		<h3><b>Total :</b> $4,349.00</h3>
         	</div>
         
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <!-- this row will not appear when printing -->
      <div class="row no-print">
        <div class="col-12">
          <button id="print" class="btn btn-warning" type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
          <button type="button" class="btn btn-success pull-right"><i class="fa fa-credit-card"></i> Submit Payment
          </button>
          <button type="button" class="btn btn-danger pull-right" style="margin-right: 5px;">
            <i class="fa fa-download"></i> Generate PDF
          </button>
        </div>
      </div>
    </section>
    <!-- /.content -->
    <div class="clearfix"></div>
  </div>



</div>


<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	<!-- JqueryPrintArea -->
	<script src="../../../assets/vendor_plugins/JqueryPrintArea/demo/jquery.PrintArea.js"></script>
	
	<script>
    $(document).ready(function() {
        $("#print").click(function() {
            var mode = 'iframe'; //popup
            var close = mode == "popup";
            var options = {
                mode: mode,
                popClose: close
            };
            $("section.printableArea").printArea(options);
        });
    });
    </script>

</body>
</html>
